@import '../../style/themes/default.less';

@drawerPrefixCls: td-drawer;
@drawer-content-width: 460rpx;

.@{drawerPrefixCls} {
  position: relative;
  z-index: @modal-zindex;
  &-mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 300ms @timing-func;
  }
  &-content{
    position: fixed;
    top: 0;
    bottom: 0;
    width: @drawer-content-width;
    text-align: left;
    background-color: @fill-base;
    opacity: 0;
    z-index: 1;
  }

  &.td-drawer-left {
    .td-drawer-content {
      left: 0;
      transform: translateX(-100%);
    }
  }
  &.at-drawer-right {
    .at-drawer-content {
      right: 0;
      transform: translateX(100%);
    }
  }
  &.td-drawer-show {
    .td-drawer-content {
      opacity: 1;
      transform: translateX(0%);
    }
  }
}

@keyframes anim-show {
  100% {
    opacity: 1;
  }
}

@keyframes anim-hide {
  100% {
    opacity: 0;
  }
}